<template>
  <a-drawer :title="title" :width="700" :visible="visible" @close="close">
    <z-table
      ref="table"
      :showAlert="false"
      :showSelection="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @change="onTableChange"
    />
  </a-drawer>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    taskId: {
      type: [String, Number]
    },
    phone: {
      type: [String, Number]
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名/代号',
          dataIndex: 'name',
          width: 60,
          align: 'center'
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          width: 80,
          align: 'center'
        },
        {
          title: '归属地',
          dataIndex: 'placeOwnership',
          width: 70,
          align: 'center'
        },
        {
          title: '团伙类型',
          dataIndex: 'groupType',
          width: 40,
          align: 'center',
          customRender: (text, record, index) => {
            return text==1?'内部':text==2?'外部':''
          }
        },
        {
          title: '通联次数',
          dataIndex: 'count',
          width: 40,
          align: 'center'
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  watch: {
    phone(value) {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    }
  },
  methods: {
    add() {
      this.visible = true
      this.$nextTick(() => {})
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {})
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    refreshTable() {
      let obj = {
        taskId: this.taskId,
        phone: this.phone
      }
      let form = Object.assign({}, obj, this.pageFilter)
      this.loading = true
      alarmServiceApi
        .getGangRelationsDetails(form)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
          } else {
            this.$message.warn(res.message?res.message:'请求失败')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    }
  }
}
</script>
<style lang="less" scoped></style>
